From 770725fbdcc8ea7bf47ef0af5a43a239bef98ff6 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 16 Aug 2022 15:31:41 -0700
Subject: sveltekit route migration

---
 src/routes/[username]/+page.server.js           |  14 ++
 src/routes/[username]/+page.svelte              |  81 +++++++++++
 src/routes/[username]/customers.svelte          |   5 -
 src/routes/[username]/customers/+page.svelte    |   5 +
 src/routes/[username]/dashboard.svelte          | 121 ----------------
 src/routes/[username]/dashboard/+page.svelte    | 121 ++++++++++++++++
 src/routes/[username]/index.js                  |  14 --
 src/routes/[username]/index.svelte              |  79 -----------
 src/routes/[username]/receive.svelte            | 175 -----------------------
 src/routes/[username]/receive/+page.svelte      | 175 +++++++++++++++++++++++
 src/routes/[username]/settings.svelte           | 176 ------------------------
 src/routes/[username]/settings/+page.svelte     | 176 ++++++++++++++++++++++++
 src/routes/[username]/support.svelte            |  60 --------
 src/routes/[username]/support/+page.svelte      |  60 ++++++++
 src/routes/[username]/transactions.svelte       |  60 --------
 src/routes/[username]/transactions/+page.svelte |  60 ++++++++
 16 files changed, 692 insertions(+), 690 deletions(-)
 create mode 100644 src/routes/[username]/+page.server.js
 create mode 100644 src/routes/[username]/+page.svelte
 delete mode 100644 src/routes/[username]/customers.svelte
 create mode 100644 src/routes/[username]/customers/+page.svelte
 delete mode 100644 src/routes/[username]/dashboard.svelte
 create mode 100644 src/routes/[username]/dashboard/+page.svelte
 delete mode 100644 src/routes/[username]/index.js
 delete mode 100644 src/routes/[username]/index.svelte
 delete mode 100644 src/routes/[username]/receive.svelte
 create mode 100644 src/routes/[username]/receive/+page.svelte
 delete mode 100644 src/routes/[username]/settings.svelte
 create mode 100644 src/routes/[username]/settings/+page.svelte
 delete mode 100644 src/routes/[username]/support.svelte
 create mode 100644 src/routes/[username]/support/+page.svelte
 delete mode 100644 src/routes/[username]/transactions.svelte
 create mode 100644 src/routes/[username]/transactions/+page.svelte

(limited to 'src/routes/[username]')

diff --git a/src/routes/[username]/+page.server.js b/src/routes/[username]/+page.server.js
new file mode 100644
index 00000000..2e52c431
--- /dev/null
+++ b/src/routes/[username]/+page.server.js
@@ -0,0 +1,14 @@
+import { get } from '$lib/utils';
+
+export async function load({ params }) {
+	let { username } = params;
+	let body;
+
+	try {
+		body = await get(`/users/${username}`);
+	} catch (e) {
+		body = {};
+	}
+
+	return body;
+}
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
new file mode 100644
index 00000000..c0183883
--- /dev/null
+++ b/src/routes/[username]/+page.svelte
@@ -0,0 +1,81 @@
+<script>
+	throw new Error("@migration task: Add data prop (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292707)");
+
+	import { browser } from '$app/env';
+	import { onMount } from 'svelte';
+	import { AppHeader, Icon, PageNotFound } from '$comp';
+	import { user } from '$lib/store';
+	import { copy } from '$lib/utils';
+	export let username;
+
+	let lightningAddress = `${username}@coinos.io`;
+
+	onMount(async () => {
+		if (browser) {
+			let { default: QRCodeStyling } = await import('qr-code-styling');
+			const qrCode = new QRCodeStyling({
+				width: window.screen.width < 640 ? 250 : 300,
+				type: 'canvas',
+				data: 'add static qr here',
+				image: '/images/invoice.svg',
+				backgroundOptions: {
+					color: 'rgba(0, 0, 0, 0)'
+				},
+				dotsOptions: {
+					type: 'rounded'
+				},
+				imageOptions: {
+					hideBackgroundDots: false
+				}
+			});
+
+			qrCode.append(document.getElementById('qr'));
+		}
+	});
+
+	let followed = false;
+</script>
+
+{#if username}
+	<AppHeader avatarPosition="left-[calc(15vw-48px)]" />
+
+	<div class="flex xl:block justify-center items-center my-20 px-3">
+		<div class="space-y-10 xl:space-y-0">
+			<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
+				<h1 class="text-3xl font-bold">{username}</h1>
+
+				<p class="text-secondary">Address goes here</p>
+
+				<!--
+        we need to hook this up
+        <button
+					class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
+					on:click={() => (followed = !followed)}
+					><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
+					{followed ? 'Remove' : 'Follow'}
+				</button>
+        -->
+			</div>
+
+			<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
+				<div
+					id="qr"
+					class="w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
+				/>
+
+				<p class="text-secondary text-center font-semibold">Scan to pay with bitcoin</p>
+
+				<div
+					class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
+				>
+					<span>{lightningAddress}</span>
+					<button on:click={() => copy(lightningAddress)}>
+						<Icon icon="copy" style="ml-2" />
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{:else}
+	<PageNotFound />
+{/if}
diff --git a/src/routes/[username]/customers.svelte b/src/routes/[username]/customers.svelte
deleted file mode 100644
index 1935b156..00000000
--- a/src/routes/[username]/customers.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import { AppHeader } from '$comp';
-</script>
-
-<AppHeader />
diff --git a/src/routes/[username]/customers/+page.svelte b/src/routes/[username]/customers/+page.svelte
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/[username]/customers/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />
diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte
deleted file mode 100644
index d056399f..00000000
--- a/src/routes/[username]/dashboard.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script>
-	import { post, failure } from '$lib/utils';
-	import { tick } from 'svelte';
-	import { AppHeader, Icon } from '$comp';
-	import { rate, user, preferredCurrency } from '$lib/store';
-
-	let payreq = '',
-		payreqField,
-		withdrawing;
-
-	let toggle = async () => {
-		withdrawing = !withdrawing;
-		await tick();
-		if (withdrawing) payreqField.focus();
-	};
-
-	let withdraw = async () => {
-		try {
-			await post('/withdraw', { payreq });
-			withdrawing = false;
-		} catch (e) {
-			failure(e.message);
-		}
-	};
-
-	$: btcPrice = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format($rate);
-
-	$: accountBalanceFiat = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format($user.account.balance * ($rate / 100000000));
-
-	$: accountBalanceBtc = $user.account.balance / 100000000;
-
-	$: accountBalanceSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		$user.account.balance
-	);
-
-	$: feepayreq = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format(($user.account.balance * ($rate / 100000000)) / 100);
-</script>
-
-{#if $user}
-	<AppHeader avatarPosition="left-[calc(50vw-48px)] lg:left-[calc(15vw-48px)]" />
-
-	<div
-		class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72"
-	>
-		<h2 class="text-2xl font-semibold">{$user.username}</h2>
-		<span class="text-secondary">Address goes here</span>
-	</div>
-
-	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
-		<div>
-			<h1 class="text-3xl md:text-4xl font-semibold mb-8">
-				{withdrawing ? 'Withdraw' : 'Dashboard'}
-			</h1>
-			{#if !withdrawing}
-				<span class="text-secondary mx-auto text-lg font-bold"
-					>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
-					{$preferredCurrency}
-				</span>
-
-				<span class="text-secondary block mt-1"
-					>Data from <span class="text-black">Binance</span>.
-				</span>
-
-				<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
-					ACCOUNT BALANCE
-				</h3>
-
-				<span class="text-3xl font-bold block mb-1"
-					>{$rate ? accountBalanceFiat : 'fetching rate...'}</span
-				>
-
-				<span class="text-secondary text-xl block">{accountBalanceSats} SATS</span>
-
-				<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={toggle}
-					>Withdraw</button
-				>
-				<p class="text-secondary my-2">You will be charged a 1% withdrawal fee on the amount.</p>
-			{:else}
-				<div class="space-y-3 w-[250px] md:w-[500px] md:pr-20">
-					<button on:click={() => (withdrawing = false)}>
-						<Icon icon="arrow-left" style="w-8" />
-					</button>
-
-					<div>
-						<label for="invoice" class="font-bold mb-1 block">Invoice</label>
-						<input
-							bind:this={payreqField}
-							type="text"
-							name="payreq"
-							required
-							bind:value={payreq}
-							class="block rounded-2xl p-3 w-full bg-primary"
-						/>
-					</div>
-
-					<div>
-						<label for="note" class="font-bold mb-1 block">Note (Optional)</label>
-						<textarea name="note" rows={2} class="block rounded-2xl p-3 w-full bg-primary" />
-					</div>
-
-					<button
-						disabled={!payreq}
-						class="{!payreq
-							? 'opacity-50'
-							: 'opacity-100'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
-						on:click={withdraw}>Send</button
-					>
-				</div>
-			{/if}
-		</div>
-	</div>
-{/if}
diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
new file mode 100644
index 00000000..d056399f
--- /dev/null
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -0,0 +1,121 @@
+<script>
+	import { post, failure } from '$lib/utils';
+	import { tick } from 'svelte';
+	import { AppHeader, Icon } from '$comp';
+	import { rate, user, preferredCurrency } from '$lib/store';
+
+	let payreq = '',
+		payreqField,
+		withdrawing;
+
+	let toggle = async () => {
+		withdrawing = !withdrawing;
+		await tick();
+		if (withdrawing) payreqField.focus();
+	};
+
+	let withdraw = async () => {
+		try {
+			await post('/withdraw', { payreq });
+			withdrawing = false;
+		} catch (e) {
+			failure(e.message);
+		}
+	};
+
+	$: btcPrice = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format($rate);
+
+	$: accountBalanceFiat = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format($user.account.balance * ($rate / 100000000));
+
+	$: accountBalanceBtc = $user.account.balance / 100000000;
+
+	$: accountBalanceSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		$user.account.balance
+	);
+
+	$: feepayreq = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format(($user.account.balance * ($rate / 100000000)) / 100);
+</script>
+
+{#if $user}
+	<AppHeader avatarPosition="left-[calc(50vw-48px)] lg:left-[calc(15vw-48px)]" />
+
+	<div
+		class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72"
+	>
+		<h2 class="text-2xl font-semibold">{$user.username}</h2>
+		<span class="text-secondary">Address goes here</span>
+	</div>
+
+	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
+		<div>
+			<h1 class="text-3xl md:text-4xl font-semibold mb-8">
+				{withdrawing ? 'Withdraw' : 'Dashboard'}
+			</h1>
+			{#if !withdrawing}
+				<span class="text-secondary mx-auto text-lg font-bold"
+					>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
+					{$preferredCurrency}
+				</span>
+
+				<span class="text-secondary block mt-1"
+					>Data from <span class="text-black">Binance</span>.
+				</span>
+
+				<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
+					ACCOUNT BALANCE
+				</h3>
+
+				<span class="text-3xl font-bold block mb-1"
+					>{$rate ? accountBalanceFiat : 'fetching rate...'}</span
+				>
+
+				<span class="text-secondary text-xl block">{accountBalanceSats} SATS</span>
+
+				<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={toggle}
+					>Withdraw</button
+				>
+				<p class="text-secondary my-2">You will be charged a 1% withdrawal fee on the amount.</p>
+			{:else}
+				<div class="space-y-3 w-[250px] md:w-[500px] md:pr-20">
+					<button on:click={() => (withdrawing = false)}>
+						<Icon icon="arrow-left" style="w-8" />
+					</button>
+
+					<div>
+						<label for="invoice" class="font-bold mb-1 block">Invoice</label>
+						<input
+							bind:this={payreqField}
+							type="text"
+							name="payreq"
+							required
+							bind:value={payreq}
+							class="block rounded-2xl p-3 w-full bg-primary"
+						/>
+					</div>
+
+					<div>
+						<label for="note" class="font-bold mb-1 block">Note (Optional)</label>
+						<textarea name="note" rows={2} class="block rounded-2xl p-3 w-full bg-primary" />
+					</div>
+
+					<button
+						disabled={!payreq}
+						class="{!payreq
+							? 'opacity-50'
+							: 'opacity-100'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
+						on:click={withdraw}>Send</button
+					>
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/[username]/index.js b/src/routes/[username]/index.js
deleted file mode 100644
index 5de1316f..00000000
--- a/src/routes/[username]/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { get } from '$lib/utils';
-
-export async function GET({ params }) {
-	let { username } = params;
-	let body;
-
-	try {
-		body = await get(`/users/${username}`);
-	} catch (e) {
-		body = {};
-	}
-
-	return { body };
-}
diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte
deleted file mode 100644
index 41d60849..00000000
--- a/src/routes/[username]/index.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<script>
-	import { browser } from '$app/env';
-	import { onMount } from 'svelte';
-	import { AppHeader, Icon, PageNotFound } from '$comp';
-	import { user } from '$lib/store';
-	import { copy } from '$lib/utils';
-	export let username;
-
-	let lightningAddress = `${username}@coinos.io`;
-
-	onMount(async () => {
-		if (browser) {
-			let { default: QRCodeStyling } = await import('qr-code-styling');
-			const qrCode = new QRCodeStyling({
-				width: window.screen.width < 640 ? 250 : 300,
-				type: 'canvas',
-				data: 'add static qr here',
-				image: '/images/invoice.svg',
-				backgroundOptions: {
-					color: 'rgba(0, 0, 0, 0)'
-				},
-				dotsOptions: {
-					type: 'rounded'
-				},
-				imageOptions: {
-					hideBackgroundDots: false
-				}
-			});
-
-			qrCode.append(document.getElementById('qr'));
-		}
-	});
-
-	let followed = false;
-</script>
-
-{#if username}
-	<AppHeader avatarPosition="left-[calc(15vw-48px)]" />
-
-	<div class="flex xl:block justify-center items-center my-20 px-3">
-		<div class="space-y-10 xl:space-y-0">
-			<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
-				<h1 class="text-3xl font-bold">{username}</h1>
-
-				<p class="text-secondary">Address goes here</p>
-
-				<!--
-        we need to hook this up
-        <button
-					class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
-					on:click={() => (followed = !followed)}
-					><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
-					{followed ? 'Remove' : 'Follow'}
-				</button>
-        -->
-			</div>
-
-			<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
-				<div
-					id="qr"
-					class="w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
-				/>
-
-				<p class="text-secondary text-center font-semibold">Scan to pay with bitcoin</p>
-
-				<div
-					class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
-				>
-					<span>{lightningAddress}</span>
-					<button on:click={() => copy(lightningAddress)}>
-						<Icon icon="copy" style="ml-2" />
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
-{:else}
-	<PageNotFound />
-{/if}
diff --git a/src/routes/[username]/receive.svelte b/src/routes/[username]/receive.svelte
deleted file mode 100644
index f0fa0fbd..00000000
--- a/src/routes/[username]/receive.svelte
+++ /dev/null
@@ -1,175 +0,0 @@
-<script>
-	// in the future we will want to allow users to set their fiat currency in the settings
-	import { AppHeader, Icon } from '$comp';
-	import { goto } from '$app/navigation';
-	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
-	import { post, warning } from '$lib/utils';
-	import { page } from '$app/stores';
-
-	let useFiat = true;
-	let amountFiat = 0;
-	let amountSats = 0;
-
-	$: amount = useFiat ? Math.round(amountFiat / ($rate / 100000000)) : amountSats;
-
-	$: $invoiceAmount = parseInt(amountSats === 0 ? amountFiat / ($rate / 100000000) : amountSats);
-	$: $invoiceAmountFiat = parseInt(
-		amountFiat === 0 ? amountSats * ($rate / 100000000) : amountFiat
-	);
-	$: amountSatsFormatted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		amountSats
-	);
-
-	$: amountFiatConverted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format(amountSats * ($rate / 100000000));
-
-	$: amountSatsConverted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		amountFiat / ($rate / 100000000)
-	);
-
-	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
-
-	const handleInput = (value) => {
-		if (useFiat) {
-			if (amountFiat === 0 && value !== '.' && value !== '<' && value !== '0') {
-				amountFiat = value;
-			} else if ((amountFiat === 0 || amountFiat === '0') && value === '0') {
-				return;
-			} else if (amountFiat === 0 && value === '.') {
-				amountFiat = '0.';
-			} else if (amountFiat !== 0 && amountFiat.includes('.') && value === '.') {
-				return;
-			} else if (value === '<') {
-				if (amountFiat !== 0) {
-					amountFiat = amountFiat.slice(0, amountFiat.length - 1);
-					if (amountFiat.length === 0) {
-						amountFiat = 0;
-						amountSats = 0;
-					}
-				}
-			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $rate) {
-				warning('Please enter an amount less than 1 bitcoin.');
-			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
-				return;
-			} else {
-				amountFiat = amountFiat + value;
-			}
-		} else {
-			if (value === '.') {
-				return;
-			} else if (amountSats === 0 && value !== '<' && value !== '0') {
-				amountSats = value;
-			} else if (value === '<') {
-				if (amountSats !== 0) {
-					amountSats = amountSats.slice(0, amountSats.length - 1);
-					if (amountSats.length === 0) {
-						amountSats = 0;
-						amountFiat = 0;
-					}
-				}
-			} else if (value !== '<' && parseInt(amountSats + value) > 100000000) {
-				warning('Please enter an amount less than 1 bitcoin.');
-			} else {
-				amountSats = amountSats + value;
-			}
-		}
-	};
-
-	let submit = async () => {
-		let { id } = await post('/invoice', { amount, rate: $rate, username: $page.params.username });
-		goto(`/invoice/${id}`);
-	};
-</script>
-
-{#if $user}
-	<AppHeader />
-
-	<div class="flex justify-center items-center mt-20 mb-3 px-3">
-		{#if $rate}
-			<div class="space-y-5">
-				<!-- amounts -->
-				<div class="text-center">
-					<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
-						{useFiat ? `$${amountFiat}` : amountSatsFormatted}<span
-							class="tracking-normal text-base font-normal">{useFiat ? 'USD' : 'SATS'}</span
-						>
-					</div>
-					<span class="text-secondary mr-1"
-						>{useFiat ? `${amountSatsConverted} SATS` : `${amountFiatConverted} USD`}</span
-					>
-					<button
-						on:click={() => {
-							if (useFiat) {
-								amountSats = (amountFiat / ($rate / 100000000)).toFixed(0).toString();
-							} else {
-								amountFiat =
-									(amountSats * ($rate / 100000000)).toFixed(2) > 0.0
-										? (amountSats * ($rate / 100000000)).toFixed(2).toString()
-										: 0;
-							}
-							useFiat = !useFiat;
-						}}><Icon icon="swap" style="inline" /></button
-					>
-				</div>
-
-				<!-- numpad -->
-				<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
-					{#each numPad as value}
-						{#if value === '<'}
-							<button
-								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center"
-								on:click={() => handleInput(value)}
-							>
-								<svg
-									class="w-5"
-									width="24"
-									height="24"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M15 19L8 12L15 5"
-										stroke="currentColor"
-										stroke-width="2"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									/>
-								</svg>
-							</button>
-						{:else}
-							<button
-								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white"
-								on:click={() => handleInput(value)}>{value}</button
-							>
-						{/if}
-					{/each}
-				</div>
-
-				<!-- buttons -->
-				<div class="space-y-3 w-full md:w-[300px] mx-auto">
-					<button
-						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
-						0
-							? 'opacity-50'
-							: 'opacity-100'}"
-						on:click={submit}
-						disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
-					>
-					<!--
-					<button
-						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
-						disabled={true}><Icon icon="send" style="mr-2" /> Send Invoice</button
-					>
-          -->
-				</div>
-			</div>
-		{:else}
-			<div
-				class="w-full md:w-[300px] h-[475px] md:h-[485px] animate-pulse bg-gray-400 rounded-xl"
-			/>
-		{/if}
-	</div>
-{/if}
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
new file mode 100644
index 00000000..f0fa0fbd
--- /dev/null
+++ b/src/routes/[username]/receive/+page.svelte
@@ -0,0 +1,175 @@
+<script>
+	// in the future we will want to allow users to set their fiat currency in the settings
+	import { AppHeader, Icon } from '$comp';
+	import { goto } from '$app/navigation';
+	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
+	import { post, warning } from '$lib/utils';
+	import { page } from '$app/stores';
+
+	let useFiat = true;
+	let amountFiat = 0;
+	let amountSats = 0;
+
+	$: amount = useFiat ? Math.round(amountFiat / ($rate / 100000000)) : amountSats;
+
+	$: $invoiceAmount = parseInt(amountSats === 0 ? amountFiat / ($rate / 100000000) : amountSats);
+	$: $invoiceAmountFiat = parseInt(
+		amountFiat === 0 ? amountSats * ($rate / 100000000) : amountFiat
+	);
+	$: amountSatsFormatted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		amountSats
+	);
+
+	$: amountFiatConverted = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format(amountSats * ($rate / 100000000));
+
+	$: amountSatsConverted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		amountFiat / ($rate / 100000000)
+	);
+
+	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
+
+	const handleInput = (value) => {
+		if (useFiat) {
+			if (amountFiat === 0 && value !== '.' && value !== '<' && value !== '0') {
+				amountFiat = value;
+			} else if ((amountFiat === 0 || amountFiat === '0') && value === '0') {
+				return;
+			} else if (amountFiat === 0 && value === '.') {
+				amountFiat = '0.';
+			} else if (amountFiat !== 0 && amountFiat.includes('.') && value === '.') {
+				return;
+			} else if (value === '<') {
+				if (amountFiat !== 0) {
+					amountFiat = amountFiat.slice(0, amountFiat.length - 1);
+					if (amountFiat.length === 0) {
+						amountFiat = 0;
+						amountSats = 0;
+					}
+				}
+			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $rate) {
+				warning('Please enter an amount less than 1 bitcoin.');
+			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
+				return;
+			} else {
+				amountFiat = amountFiat + value;
+			}
+		} else {
+			if (value === '.') {
+				return;
+			} else if (amountSats === 0 && value !== '<' && value !== '0') {
+				amountSats = value;
+			} else if (value === '<') {
+				if (amountSats !== 0) {
+					amountSats = amountSats.slice(0, amountSats.length - 1);
+					if (amountSats.length === 0) {
+						amountSats = 0;
+						amountFiat = 0;
+					}
+				}
+			} else if (value !== '<' && parseInt(amountSats + value) > 100000000) {
+				warning('Please enter an amount less than 1 bitcoin.');
+			} else {
+				amountSats = amountSats + value;
+			}
+		}
+	};
+
+	let submit = async () => {
+		let { id } = await post('/invoice', { amount, rate: $rate, username: $page.params.username });
+		goto(`/invoice/${id}`);
+	};
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="flex justify-center items-center mt-20 mb-3 px-3">
+		{#if $rate}
+			<div class="space-y-5">
+				<!-- amounts -->
+				<div class="text-center">
+					<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
+						{useFiat ? `$${amountFiat}` : amountSatsFormatted}<span
+							class="tracking-normal text-base font-normal">{useFiat ? 'USD' : 'SATS'}</span
+						>
+					</div>
+					<span class="text-secondary mr-1"
+						>{useFiat ? `${amountSatsConverted} SATS` : `${amountFiatConverted} USD`}</span
+					>
+					<button
+						on:click={() => {
+							if (useFiat) {
+								amountSats = (amountFiat / ($rate / 100000000)).toFixed(0).toString();
+							} else {
+								amountFiat =
+									(amountSats * ($rate / 100000000)).toFixed(2) > 0.0
+										? (amountSats * ($rate / 100000000)).toFixed(2).toString()
+										: 0;
+							}
+							useFiat = !useFiat;
+						}}><Icon icon="swap" style="inline" /></button
+					>
+				</div>
+
+				<!-- numpad -->
+				<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
+					{#each numPad as value}
+						{#if value === '<'}
+							<button
+								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center"
+								on:click={() => handleInput(value)}
+							>
+								<svg
+									class="w-5"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										d="M15 19L8 12L15 5"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								</svg>
+							</button>
+						{:else}
+							<button
+								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white"
+								on:click={() => handleInput(value)}>{value}</button
+							>
+						{/if}
+					{/each}
+				</div>
+
+				<!-- buttons -->
+				<div class="space-y-3 w-full md:w-[300px] mx-auto">
+					<button
+						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
+						0
+							? 'opacity-50'
+							: 'opacity-100'}"
+						on:click={submit}
+						disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
+					>
+					<!--
+					<button
+						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
+						disabled={true}><Icon icon="send" style="mr-2" /> Send Invoice</button
+					>
+          -->
+				</div>
+			</div>
+		{:else}
+			<div
+				class="w-full md:w-[300px] h-[475px] md:h-[485px] animate-pulse bg-gray-400 rounded-xl"
+			/>
+		{/if}
+	</div>
+{/if}
diff --git a/src/routes/[username]/settings.svelte b/src/routes/[username]/settings.svelte
deleted file mode 100644
index e4d7b0bf..00000000
--- a/src/routes/[username]/settings.svelte
+++ /dev/null
@@ -1,176 +0,0 @@
-<script>
-	import { AppHeader, Icon, Toggle, LocaleSelector } from '$comp';
-	import { user, colorTheme } from '$lib/store';
-
-	let setting = 'account';
-	let password;
-	let revealPassword = false;
-
-	const colorThemes = [
-		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
-		{ theme: 2, color1: 'from-[#FDFCFB]', color2: 'to-[#E2D1C3]' },
-		{ theme: 3, color1: 'from-[#E6E9F0]', color2: 'to-[#EEF1F5]' },
-		{ theme: 4, color1: 'from-[#D5D4D0]', color2: 'to-[#EEEEEC]' },
-		{ theme: 5, color1: 'from-[#F3E7E9]', color2: 'to-[#E3EEFF]' },
-		{ theme: 6, color1: 'from-[#F5F7FA]', color2: 'via-[#EAF2FF] to-[#DEDFFF]' }
-	];
-	// need to update this to use the new backend field
-	let selectedTheme = 1;
-
-	const handleThemeClick = (colors) => {
-		selectedTheme = colors.theme;
-		$colorTheme = colors.color1 + ' ' + colors.color2;
-	};
-</script>
-
-{#if $user}
-	<AppHeader />
-
-	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
-		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Settings</h1>
-
-		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
-			<button class:selected={setting === 'account'} on:click={() => (setting = 'account')}
-				>ACCOUNT</button
-			>
-
-			<button class:selected={setting === 'pos'} on:click={() => (setting = 'pos')}
-				>POINT OF SALE</button
-			>
-
-			<button class:selected={setting === 'security'} on:click={() => (setting = 'security')}
-				>SECURITY</button
-			>
-		</div>
-
-		{#if setting === 'account'}
-			<div>
-				<label for="language" class="font-bold block mb-1">Language</label>
-				<LocaleSelector style="block py-3 w-full" />
-			</div>
-
-			<div>
-				<label for="username" class="font-bold mb-1 block">Username</label>
-				<input
-					type="text"
-					disabled
-					name="username"
-					value={$user.username}
-					class="block border rounded-xl p-3 w-full"
-				/>
-			</div>
-
-			<div class="relative">
-				<label for="password" class="block font-bold block mb-1">New Password</label>
-				{#if revealPassword}
-					<input type="text" class="block border rounded-xl p-3 w-full" bind:value={password} />
-				{:else}
-					<input type="password" class="block border rounded-xl p-3 w-full" bind:value={password} />
-				{/if}
-				<button
-					type="button"
-					on:click={() => (revealPassword = !revealPassword)}
-					class="absolute right-5 top-10"
-				>
-					<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
-				</button>
-			</div>
-
-			<div>
-				<label for="address" class="font-bold mb-1 block">Business Address</label>
-				<input type="text" name="address" class="block border rounded-xl p-3 w-full" />
-			</div>
-
-			<div>
-				<div class="flex justify-between items-center">
-					<span class="font-bold">Email Notifications</span>
-					<Toggle id="email-notify" />
-				</div>
-				<p class="text-secondary mt-1 w-9/12">
-					Get notified via email when a change occurs on your account or when people send you
-					payments.
-				</p>
-			</div>
-
-			<div>
-				<div class="flex justify-between items-center">
-					<span class="font-bold">SMS Notifications</span>
-					<Toggle id="sms-notify" />
-				</div>
-				<p class="text-secondary mt-1 w-9/12">
-					CoinOS will send you text notifications when this is enabled.
-				</p>
-			</div>
-
-			<div>
-				<span class="font-bold mb-1 block">Color Theme</span>
-				<p class="text-secondary mb-1">Select from the default color themes.</p>
-				{#each colorThemes as colors}
-					<button
-						class="mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
-						colors.theme
-							? 'border-black'
-							: ''}"
-						on:click={() => handleThemeClick(colors)}
-					/>
-				{/each}
-			</div>
-		{:else if setting === 'pos'}
-			<div>
-				<label for="currency" class="font-bold block mb-1">Local Currency</label>
-				<select name="currency" class="block py-3 w-full">
-					<option value="USD">USD</option>
-				</select>
-			</div>
-
-			<div>
-				<label for="btc-unit" class="font-bold block mb-1">Display bitcoin in:</label>
-				<select disabled name="btc-unit" class="block py-3 w-full">
-					<option value="SATS">Satoshi (SATS)</option>
-					<option value="BTC">Bitcoin (BTC)</option>
-				</select>
-			</div>
-		{:else}
-			<div>
-				<span class="font-bold mb-1">Security Pin</span>
-				<p class="text-secondary mb-1">
-					Set a security pin that will be used to unlock your settings and to send outgoing
-					payments.
-				</p>
-				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
-					><Icon icon="lock" style="mr-1" /> Set Pin</button
-				>
-			</div>
-
-			<div>
-				<label for="auto-lock" class="font-bold mb-1">Auto-Lock Timer</label>
-				<p class="text-secondary mb-1">
-					Your account will go into a secure mode automatically after a specified time:
-				</p>
-				<select name="auto-lock" class="block py-3 w-full">
-					<option value="5">5 min</option>
-					<option value="10">10 min</option>
-					<option value="30">30 min</option>
-					<option value="60">1 hour</option>
-					<option value="480">8 hours</option>
-				</select>
-			</div>
-
-			<div>
-				<span class="font-bold mb-1">2-Factor Authentication</span>
-				<p class="text-secondary mb-1">
-					Add an extra level of security to your device by enableing 2-factor authentication.
-				</p>
-				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
-					><Icon icon="mobile" style="mr-1" /> Set up 2FA</button
-				>
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.selected {
-		color: black;
-	}
-</style>
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
new file mode 100644
index 00000000..e4d7b0bf
--- /dev/null
+++ b/src/routes/[username]/settings/+page.svelte
@@ -0,0 +1,176 @@
+<script>
+	import { AppHeader, Icon, Toggle, LocaleSelector } from '$comp';
+	import { user, colorTheme } from '$lib/store';
+
+	let setting = 'account';
+	let password;
+	let revealPassword = false;
+
+	const colorThemes = [
+		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
+		{ theme: 2, color1: 'from-[#FDFCFB]', color2: 'to-[#E2D1C3]' },
+		{ theme: 3, color1: 'from-[#E6E9F0]', color2: 'to-[#EEF1F5]' },
+		{ theme: 4, color1: 'from-[#D5D4D0]', color2: 'to-[#EEEEEC]' },
+		{ theme: 5, color1: 'from-[#F3E7E9]', color2: 'to-[#E3EEFF]' },
+		{ theme: 6, color1: 'from-[#F5F7FA]', color2: 'via-[#EAF2FF] to-[#DEDFFF]' }
+	];
+	// need to update this to use the new backend field
+	let selectedTheme = 1;
+
+	const handleThemeClick = (colors) => {
+		selectedTheme = colors.theme;
+		$colorTheme = colors.color1 + ' ' + colors.color2;
+	};
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Settings</h1>
+
+		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
+			<button class:selected={setting === 'account'} on:click={() => (setting = 'account')}
+				>ACCOUNT</button
+			>
+
+			<button class:selected={setting === 'pos'} on:click={() => (setting = 'pos')}
+				>POINT OF SALE</button
+			>
+
+			<button class:selected={setting === 'security'} on:click={() => (setting = 'security')}
+				>SECURITY</button
+			>
+		</div>
+
+		{#if setting === 'account'}
+			<div>
+				<label for="language" class="font-bold block mb-1">Language</label>
+				<LocaleSelector style="block py-3 w-full" />
+			</div>
+
+			<div>
+				<label for="username" class="font-bold mb-1 block">Username</label>
+				<input
+					type="text"
+					disabled
+					name="username"
+					value={$user.username}
+					class="block border rounded-xl p-3 w-full"
+				/>
+			</div>
+
+			<div class="relative">
+				<label for="password" class="block font-bold block mb-1">New Password</label>
+				{#if revealPassword}
+					<input type="text" class="block border rounded-xl p-3 w-full" bind:value={password} />
+				{:else}
+					<input type="password" class="block border rounded-xl p-3 w-full" bind:value={password} />
+				{/if}
+				<button
+					type="button"
+					on:click={() => (revealPassword = !revealPassword)}
+					class="absolute right-5 top-10"
+				>
+					<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
+				</button>
+			</div>
+
+			<div>
+				<label for="address" class="font-bold mb-1 block">Business Address</label>
+				<input type="text" name="address" class="block border rounded-xl p-3 w-full" />
+			</div>
+
+			<div>
+				<div class="flex justify-between items-center">
+					<span class="font-bold">Email Notifications</span>
+					<Toggle id="email-notify" />
+				</div>
+				<p class="text-secondary mt-1 w-9/12">
+					Get notified via email when a change occurs on your account or when people send you
+					payments.
+				</p>
+			</div>
+
+			<div>
+				<div class="flex justify-between items-center">
+					<span class="font-bold">SMS Notifications</span>
+					<Toggle id="sms-notify" />
+				</div>
+				<p class="text-secondary mt-1 w-9/12">
+					CoinOS will send you text notifications when this is enabled.
+				</p>
+			</div>
+
+			<div>
+				<span class="font-bold mb-1 block">Color Theme</span>
+				<p class="text-secondary mb-1">Select from the default color themes.</p>
+				{#each colorThemes as colors}
+					<button
+						class="mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
+						colors.theme
+							? 'border-black'
+							: ''}"
+						on:click={() => handleThemeClick(colors)}
+					/>
+				{/each}
+			</div>
+		{:else if setting === 'pos'}
+			<div>
+				<label for="currency" class="font-bold block mb-1">Local Currency</label>
+				<select name="currency" class="block py-3 w-full">
+					<option value="USD">USD</option>
+				</select>
+			</div>
+
+			<div>
+				<label for="btc-unit" class="font-bold block mb-1">Display bitcoin in:</label>
+				<select disabled name="btc-unit" class="block py-3 w-full">
+					<option value="SATS">Satoshi (SATS)</option>
+					<option value="BTC">Bitcoin (BTC)</option>
+				</select>
+			</div>
+		{:else}
+			<div>
+				<span class="font-bold mb-1">Security Pin</span>
+				<p class="text-secondary mb-1">
+					Set a security pin that will be used to unlock your settings and to send outgoing
+					payments.
+				</p>
+				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
+					><Icon icon="lock" style="mr-1" /> Set Pin</button
+				>
+			</div>
+
+			<div>
+				<label for="auto-lock" class="font-bold mb-1">Auto-Lock Timer</label>
+				<p class="text-secondary mb-1">
+					Your account will go into a secure mode automatically after a specified time:
+				</p>
+				<select name="auto-lock" class="block py-3 w-full">
+					<option value="5">5 min</option>
+					<option value="10">10 min</option>
+					<option value="30">30 min</option>
+					<option value="60">1 hour</option>
+					<option value="480">8 hours</option>
+				</select>
+			</div>
+
+			<div>
+				<span class="font-bold mb-1">2-Factor Authentication</span>
+				<p class="text-secondary mb-1">
+					Add an extra level of security to your device by enableing 2-factor authentication.
+				</p>
+				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
+					><Icon icon="mobile" style="mr-1" /> Set up 2FA</button
+				>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.selected {
+		color: black;
+	}
+</style>
diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte
deleted file mode 100644
index 335c804f..00000000
--- a/src/routes/[username]/support.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-	// this needs to be hooked up to the backend
-	import { AppHeader } from '$comp';
-	import { user } from '$lib/store';
-	let email;
-	let message;
-</script>
-
-{#if $user}
-	<AppHeader />
-
-	<div class="my-20">
-		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Support</h1>
-
-		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
-			<div>
-				<label for="email" class="font-semibold">Email</label>
-				<input
-					class="block border rounded-xl p-2 w-full"
-					type="email"
-					name="email"
-					bind:value={email}
-					required
-				/>
-			</div>
-
-			<div>
-				<label for="account" class="font-semibold">Account Name</label>
-				<input
-					class="block border rounded-xl p-2 w-full"
-					type="text"
-					name="account"
-					required
-					disabled
-					value={$user.username}
-				/>
-			</div>
-
-			<div>
-				<label for="message" class="font-semibold">Message</label>
-				<textarea
-					rows={5}
-					class="block border rounded-xl p-2 w-full"
-					type="text"
-					name="message"
-					bind:value={message}
-					required
-				/>
-			</div>
-
-			<button
-				disabled={!email || !message}
-				class="{!email || !message
-					? 'opacity-50'
-					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto"
-				>Send</button
-			>
-		</form>
-	</div>
-{/if}
diff --git a/src/routes/[username]/support/+page.svelte b/src/routes/[username]/support/+page.svelte
new file mode 100644
index 00000000..335c804f
--- /dev/null
+++ b/src/routes/[username]/support/+page.svelte
@@ -0,0 +1,60 @@
+<script>
+	// this needs to be hooked up to the backend
+	import { AppHeader } from '$comp';
+	import { user } from '$lib/store';
+	let email;
+	let message;
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20">
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Support</h1>
+
+		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
+			<div>
+				<label for="email" class="font-semibold">Email</label>
+				<input
+					class="block border rounded-xl p-2 w-full"
+					type="email"
+					name="email"
+					bind:value={email}
+					required
+				/>
+			</div>
+
+			<div>
+				<label for="account" class="font-semibold">Account Name</label>
+				<input
+					class="block border rounded-xl p-2 w-full"
+					type="text"
+					name="account"
+					required
+					disabled
+					value={$user.username}
+				/>
+			</div>
+
+			<div>
+				<label for="message" class="font-semibold">Message</label>
+				<textarea
+					rows={5}
+					class="block border rounded-xl p-2 w-full"
+					type="text"
+					name="message"
+					bind:value={message}
+					required
+				/>
+			</div>
+
+			<button
+				disabled={!email || !message}
+				class="{!email || !message
+					? 'opacity-50'
+					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto"
+				>Send</button
+			>
+		</form>
+	</div>
+{/if}
diff --git a/src/routes/[username]/transactions.svelte b/src/routes/[username]/transactions.svelte
deleted file mode 100644
index c91fd900..00000000
--- a/src/routes/[username]/transactions.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-	import { AppHeader } from '$comp';
-	import { user, newPayment } from '$lib/store';
-
-	$newPayment = false;
-
-	$: transactions = $user.payments;
-</script>
-
-{#if $user}
-	<AppHeader />
-
-	<div class="my-20">
-		<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
-			Transaction History
-		</h1>
-
-		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
-			<div class="text-secondary grid grid-cols-3 mb-5">
-				<h2>AMOUNT</h2>
-				<h2 class="text-center">TYPE</h2>
-				<h2 class="text-right">TIME</h2>
-			</div>
-
-			<div class="space-y-10">
-				{#if transactions.length}
-					{#each transactions as tx}
-						<div class="grid grid-cols-3 border-b pb-5">
-							<div class="font-bold">
-								<span class="block mb-1"
-									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
-										style: 'currency',
-										currency: 'USD'
-									}).format(tx.amount * (tx.rate / 100000000))}
-								</span>
-
-								<span class="text-secondary"
-									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
-										maximumFractionDigits: 0
-									}).format(tx.amount)}
-									SATS
-								</span>
-							</div>
-
-							<div class="text-center">
-								<span class="text-secondary">{tx.amount < 0 ? 'Sent' : 'Received'}</span>
-							</div>
-
-							<div class="text-secondary text-right">
-								{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
-							</div>
-						</div>
-					{/each}
-				{:else}
-					<p class="text-secondary text-lg text-center">No transactions yet.</p>
-				{/if}
-			</div>
-		</div>
-	</div>
-{/if}
diff --git a/src/routes/[username]/transactions/+page.svelte b/src/routes/[username]/transactions/+page.svelte
new file mode 100644
index 00000000..c91fd900
--- /dev/null
+++ b/src/routes/[username]/transactions/+page.svelte
@@ -0,0 +1,60 @@
+<script>
+	import { AppHeader } from '$comp';
+	import { user, newPayment } from '$lib/store';
+
+	$newPayment = false;
+
+	$: transactions = $user.payments;
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20">
+		<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
+			Transaction History
+		</h1>
+
+		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
+			<div class="text-secondary grid grid-cols-3 mb-5">
+				<h2>AMOUNT</h2>
+				<h2 class="text-center">TYPE</h2>
+				<h2 class="text-right">TIME</h2>
+			</div>
+
+			<div class="space-y-10">
+				{#if transactions.length}
+					{#each transactions as tx}
+						<div class="grid grid-cols-3 border-b pb-5">
+							<div class="font-bold">
+								<span class="block mb-1"
+									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
+										style: 'currency',
+										currency: 'USD'
+									}).format(tx.amount * (tx.rate / 100000000))}
+								</span>
+
+								<span class="text-secondary"
+									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
+										maximumFractionDigits: 0
+									}).format(tx.amount)}
+									SATS
+								</span>
+							</div>
+
+							<div class="text-center">
+								<span class="text-secondary">{tx.amount < 0 ? 'Sent' : 'Received'}</span>
+							</div>
+
+							<div class="text-secondary text-right">
+								{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
+							</div>
+						</div>
+					{/each}
+				{:else}
+					<p class="text-secondary text-lg text-center">No transactions yet.</p>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
-- 
cgit v1.2.3